<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="../../static/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../static/css/ylb.css">
	<link rel="shortcut icon" href="../../static/img/logo.png">
	<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../static/js/popper.min.js"></script>
	<script type="text/javascript" src="../../static/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../static/js/getNavList.js"></script>
	<script type="text/javascript" src="../../static/js/notification.js"></script>
	<script type="text/javascript">
        var timestamp = new Date().getTime();
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = './sucai.js?v=' + timestamp;
        document.head.appendChild(script);
    </script>
</head>
<body>

<div id="app">
	
	<!-- 左侧 -->
	<div class="left">
		<div class="dhview">

			<!-- LOGO -->
			<a href="../index/" class="index">
			    <div class="logo"></div>
			</a>

			<!-- 导航 -->
			<ul id="navList"></ul>

			<!-- 账号 -->
			<div class="account">加载中...</div>
		    
		</div>
	</div>

	<!-- 右侧 -->
	<div id="right">
	    
		<h3>素材管理</h3>
		<div class="data-card">
		    
			<!-- 按钮区域 -->
			<div class="button-view" id="button-view" style="display:none;">
			    
			    <button class="default-btn">图片素材</button>
			    <a href="doc.html"><button class="tint-btn">文档素材</button></a>
				<button class="tint-btn pldel" data-toggle="modal" data-target="#delSuCaiModel" style="margin-left:10px;">删除选中项</button>
				<button class="tint-btn upimg" style="float:right;">
    			    <form id="uploadSuCai" enctype="multipart/form-data">
                        <input type="file" class="file_input" name="file[]" accept="image/*" id="selectSuCai" multiple />
                        <span>上传素材</span>
                    </form>
				</button>
			</div>

			<!-- 数据列表 -->
			<div class="data-list">
                <div class="sucai-Pannel">
                    <div class="grid-sucai"></div>
                    <div class="jiazai"></div>
                </div>
                
                <!--分页-->
                <div class="fy"></div>
                
			</div><!-- data-list -->
			
			<p class="loading" style="display: none;"></p>
			
		</div><!-- data-card -->
	</div><!-- right -->
  	
  	<!-- 删除素材 -->
    <div class="modal fade" id="delSuCaiModel">
        <div class="modal-dialog">
            <div class="modal-content">
                
                <!-- 头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">删除素材</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div><!-- modal-header -->
                
                <!-- 内容 -->
                <div class="modal-body">
                    将会删除该素材！源文件及数据库素材记录均会删除！删除后无法恢复，请小心操作！
                </div><!-- modal-body -->
                
                <!-- 底部操作 -->
                <div class="modal-footer">
                    <button class="default-btn" onclick="delSuCai()">确认删除</button>
                </div><!-- modal-footer -->
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- delSuCaiModel -->
    
</div><!-- app -->

<script>

    $("#selectSuCai").change(function(e) {
        
        var fileSelect = e.target.files;
    
        if (fileSelect.length > 0) {
            
            // 修改按钮文字
            $("#right .data-card .button-view .upimg span").text('正在上传...');
    
            let uploadCount = 0;
            let total = fileSelect.length;
    
            // 逐个上传文件
            for (let i = 0; i < total; i++) {
                let formData = new FormData();
                formData.append("file", fileSelect[i]); // 每次只传一个
    
                uploadSingleFile(formData, function() {
                    uploadCount++;
    
                    // 全部上传完成
                    if (uploadCount === total) {
                        $("#right .data-card .button-view .upimg span").text('上传素材');
                        getSuCaiList(1); // 刷新素材列表
                    }
                });
            }
    
            // 清空选择框
            $("#selectSuCai").val('');
        }
    });
    
    function uploadSingleFile(imageData, callback) {
        $.ajax({
            url: "../public/uploadToSuCaiKu.php",
            type: "POST",
            data: imageData,
            cache: false,
            processData: false,
            contentType: false,
            success: function(res) {
                if (res.code == 200) {
                    showNotification(res.msg);
                } else {
                    showNotification("上传失败：" + res.msg);
                }
    
                if (typeof callback === 'function') callback();
            },
            error: function() {
                showNotification('上传失败：/public/uploadToSuCaiKu.php 服务器错误！');
                if (typeof callback === 'function') callback();
            }
        });
    }
</script>

</body>
</html>